<template>
<view class="container padding">
	<view class="shim"></view>
	<view class="profile-banner padding box-shadow">
		<view class="profile-rank-banner">
			<image class="profile-rank-cover"
				src="/static/bg_rank.png"
				mode="aspectFill" />
			<view class="profile-rank-text">
				<text>学分排行榜</text>
			</view>
		</view>
		<view class="list-item with-icon sec-top border"
			v-for="(item, index) in list"
			:key="item.id">
			<view class="list-item-icon">
				<text class="iconfont icon-collect"
					:class="'rank-' + index"></text>
				<text class="list-item-rank">{{ item.rank }}</text>
			</view>
			<view class="list-item-content">
				<view class="list-item-cover">
					<image class="list-item-avatar"
						src="/static/v2_qb8b4c.png"
						mode="aspectFill" />
				</view>
				<view class="list-item-info sec-left">
					<view class="list-item-title">{{ item.name }}</view>
					<view class="list-item-text">{{ item.mark }}分</view>
				</view>
			</view>
		</view>
	</view>
	<view class="empty-text sec-top">已经到底啦～</view>
	<!-- 底部操作 -->
	<view class="shim-large"></view>
	<view class="fixed-action bottom" style="height: 108rpx;">
		<view class="fixed-action-item">
			<view class="list-item-info" style="text-align: center;">
				<view class="list-item-title" style="font-size: 36rpx; color: #fe5253;">123</view>
				<view class="list-item-text">我的排名</view>
			</view>
		</view>
		<view class="fixed-action-item">
			<view class="list-item-content">
				<view class="list-item-cover">
					<image class="list-item-avatar"
						src="/static/v2_qb8b4c.png"
						mode="aspectFill" />
				</view>
				<view class="list-item-info sec-left">
					<view class="list-item-title">旋风小子</view>
					<view class="list-item-text">120分</view>
				</view>
			</view>
		</view>
	</view>
</view>
</template>

<script>
import { getMyClassInfo, postClassRank } from '@/api/index.js';
export default {
	data() {
		return {
			list: []
		}
	},
	onShow() {
		const token = uni.getStorageSync('X-Auth-Token');
		if (!token) {
			uni.navigateTo({
				url: '/pages/login/login'
			});
		}
		getMyClassInfo().then(res => {
			let id = res.data && res.data.id;
			postClassRank({
				classroomId: id,
				number: 30
			}).then(res => {
				this.list = res.list || [];
			})
		})
	},
	methods: {
		
	}
}
</script>

<style lang="scss">
.rank {
	&-0 {
		color: #fe5253;
	}
	&-1 {
		color: #deb887;
	}
	&-2 {
		color: #6495ed;
	}
}
</style>
